<script setup lang="ts">
import { reactive, ref } from 'vue';
import { toast } from '@/utils/tools';
import { getLocation } from '@/utils/apiUniTool';
import { onShow } from '@dcloudio/uni-app';
import cache from "@/utils/cache";


const locationFlag = ref(false);
// 位置信息
const locationInfo = reactive({
    lat: 0,// 未读
    lng: 0, // 经度
    cityProvince:''
})
onShow(async () => {
  handleReposition()
})
const handleReposition = () => {
    //console.log(22222);
    locationFlag.value = true;
    // getLocation().then((res: any) => {
    //     console.log(res, '定位返回结果----')

    //     locationInfo.lat = res.latitude;
    //     locationInfo.lng = res.longitude;
    //     console.log(locationInfo);
    // }).catch((err: any) => {
    //     toast('糟糕！定位失败了')
    //     // locationFlag.value = false;
    // });
    getUniLocation()
    setTimeout(() => {
        locationFlag.value = false;
    }, 1000)
}
const getUniLocation = () =>{
    uni.getLocation({
        type: 'wgs84',
        success(res) {
        // console.log('获取定位信息', res);
        // that.lat = res.latitude;
        // that.lng = res.longitude;
        const latitude = res.latitude;
        const longitude = res.longitude;
        //console.log(latitude, latitude, '经纬度')
        uni.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: {
            location: `${latitude},${longitude}`,
            key: 'QWQBZ-XIXCZ-6W2XR-7ISUU-QQX6E-GMBEF',
            get_poi: 0
          },
          success(res) {
            const addressComponent = res.data.result.address_component;
            const city = addressComponent.city;
            const district = addressComponent.district;
            locationInfo.cityProvince = city + district
            cache.set("cityProvince", locationInfo.cityProvince);
          }
        })
        }
    });
}
</script>
<template>
    <view class="container">
        <view class="l-card">
            <view class="title">当前定位:</view>
            <view class="flex flex-between">
                <view class="flex address flex-align-center">
                    <image src="@/static/images/coord-red.png" mode="scaleToFill"
                        :class="locationFlag ? 'animate__animated  animate__bounce' : ''" />
                    <text v-if="!locationFlag">{{locationInfo.cityProvince}}</text>
                    <text v-else>正在定位...</text>
                </view>
                <view class="reposition" v-if="!locationFlag" @click="handleReposition">
                    <text>重新定位</text>
                    <uv-line color="#C33E29"></uv-line>
                </view>
            </view>
        </view>
    </view>
</template>
<style scoped lang="scss">
.container {
    padding: 30rpx 0;
    border-radius: 0;
}

.title {
    margin-bottom: 30rpx;
}

.address {
    image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;

    }

    text {
        font-size: 28rpx;
        color: #635b5b;
    }
}

.reposition {
    color: #C33E29;
}
</style>
